<template>
<div id="sale">
    <Topbar :title ='title' :color='color' :fontColor='color2' :bgUrl="bgUrl">
    </Topbar>
    <template v-for="(item,index) in 10">
        <div id="hongbao" :key='index' >
            <div id="sale-type">
                <div id="sale-card">
                    <div>超市消费券</div>
                    <div>$8</div>
                </div>
                <div id="expire">
                    <div>有效期至2020.9.21</div>
                    <div>满15元可用</div>
                </div>
            </div>
            <div id="sale-txt">
                限商品现价+包装费满15元使用 。
                限非到店自取订单，本账户闪购商家首单，超市便利、美妆日化、
                服饰鞋帽、日用百货、食品专营、宠物、母婴、食材、水果类商家，
                新客专享商品与新客红包不能同享使用。限登录和收餐手机号为15232267355使用。
            </div>
        </div>
    </template>

</div>
</template>

<script>
import Topbar from '../../components/search/SearchTop'
export default {
    data () {
        return {
            title:'美团红包',
            color:'rgb(51,51,51)',
            color2:'#fff',
            bgUrl:'url("")'
        }
    },
    components:{
        Topbar
    },
    mounted () {
    }
}
</script>

<style lang='scss' scoped>
#sale{
    background: #eee;
    #hongbao{
    display: flex;
    flex-direction: column;
    background: #fff;
    margin: 10px 10px 10px;
    border-radius: 5px;
    #sale-type{
        display: flex;
        flex-direction: column;
        margin: 0 10px 10px;
        border-radius: 5px;
        // &:before{
        //     content: '';
        //     display: block;
        //     position: absolute;
        //     bottom: 5px;
        //     width: 10px;
        //     height: 10px;
        //     border-radius: 50%;
        //     left: -15px;
        //     background: #eee;
        // }        
        #sale-card{
            display: flex;
            // margin: 20px 10px 0 10px;
            position: relative;
            font-size: 20px;
            justify-content: space-between;
            color:red;
        }
        #expire{
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            color:#333;
            // &:after{
            //     content: '';
            //     display: block;
            //     position: absolute;
            //     bottom: 5px;
            //     width: 10px;
            //     height: 10px;
            //     border-radius: 50%;
            //     right: -15px;
            //     background: #eee;
            // }
        }

    }
    #sale-txt{
        margin-top: 10px;
        padding: 10px;
        line-height: 20px;
        color: #444;
    }
}
}


</style>
